<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-07-24
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-07-24
 * @FilePath: /element-admin/src/views/MemberInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="MemberWeightHis-page">
    <!-- bodyer -->
    <div class="drawer-bodyer">
      <el-row class="row fstRow clearfix">
        <el-button @click="childMethod()" size="small">关闭</el-button>
      </el-row>
    </div>
    <!--顶部搜索栏-->
    <!--中部数据表格栏-->
    <div class="col-md-12" style="margin-top: 15px;margin-bottom: 40px" v-loading.fullscreen.lock="fullscreenLoading">
      <el-col :span="22" :offset="1" class="custRow clearfix">
          <el-table :data="tableData.rrk_his" v-loading="isLoading" border stripe
                    :cell-style="{padding:'3px'}" :key="isIndex" style="margin-top:5px;width: 100%"
                    row-key="id">
            <el-table-column v-if="isIndex == 1" type="index" label="序号" width="75" fixed></el-table-column>
            <el-table-column prop="NAME" label="姓名" > <template > {{this.mem_name}} </template></el-table-column>
            <el-table-column prop="cal_date" label="身高" />
            <el-table-column prop="height" label="身高" />
            <el-table-column prop="weight" label="体重" />
            <el-table-column prop="heatgap" label="热量缺口"/>
            <!--                <el-table-column prop="food_ingredients_calories" label="热量(卡)"/>-->
            <el-table-column prop="bmi" label="bmi"/>
            <el-table-column prop="bodyFatRat" label="体脂率"/>
          </el-table>
      </el-col>
      <el-col :span="22" :offset="1" class="custRow clearfix">
        <el-card :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <el-descriptions class="margin-top" :title="tableData.name" :column="2" size="mini" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  最大值
                </template>
                {{ tableData.max_weight }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  最小值
                </template>
                {{ tableData.min_weight }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <template>
            <div id="mainPie" class="echarts-contanier" ></div>
          </template>
        </el-card>
      </el-col>
    </div>
  </div>
</template>

<script>
import {fetchWeightHis,drawHisLine} from "@/api/MemberWeightHis";
import {Loading} from 'element-ui';

export default {
  name: "MemberWeightHis",
  components: {},
  data() {
    return {
      loadingInstance: null,
      member_id: '',
      mem_name: "",
      isIndex: 1,
      isLoading: false,
      fullscreenLoading: false,
      tableHeight: 650,
      tableData: [],
      myLineChart: [],
    }
  },
  props: {
    drawId: {type: String, default: ''}
  },
  computed: {},
  methods: {
    init_obj(){
      return {}
    },
    handle_init() {
      this.tableData = [];
      this.myLineChart = [];
      // 读取会员数据
      this.handle_his_fetch(this.member_id);
    },
    async handle_his_fetch(drawId) {
      fetchWeightHis({"memberId": drawId}).then(res => {
        if (res.code == 200) {
          this.tableData = res.data;
          this.mem_name = res.data.name;
          let myLineChart = document.getElementById("mainPie");
          setTimeout(() => {
            let lineChart = drawHisLine(myLineChart, res['line_data']);
            this.myLineChart.push(lineChart);
          },500);
        }
      }).catch(err => {
        // Message.error('错了哦，STEP 1 参数异常' + err);
        this.$notify({title: '执行失败', message: '计算参数异常' + err, type: 'error', offset: 100});
      })
    },
    formattedNumber(number) {
      const num = parseFloat(number); // 先将传入的值转换成浮点数类型
      if (!isNaN(num)) { // 判断是否能正常转换成数字
        return num.toFixed(2).toString(); // 返回保留两位小数后的结果
      } else {
        return ''; // 若传入值无法转换成数字，则返回空字符串
      }
    },
    childMethod() {
      this.tableData = [];
      this.$emit('fMethod', true);
    },
  },
  created() {
    let options = {fullscreen: true}
    this.loadingInstance = Loading.service(options);
    this.loadingInstance.close();
  },
  mounted() {
  },
  beforeDestroy() {
    if(this.myLineChart){
      this.myLineChart.dispose();
    }
  },
  watch: {
    drawId: {
      immediate: true,
      handler(drawId) {
        if (drawId.length > 0) {
          this.member_id = drawId;
          this.handle_init();
        }
      }
    }
  }
}
</script>

<style scoped>
li {
  list-style-type: none;
}

.fstRow {
  margin-top: 0px;
  display: flex;
  padding: 5px 5px 5px 5px;
}
.custRow {
  display: flex;
  margin-top: 5px;
  padding: 5px 5px 5px 5px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#container > div {
  margin: 5px;
  width: 400px; /*宽度根据实际情况调节，应与上面一致*/
  overflow: auto; /*防止内容溢出导致布局错位*/
}
.echarts-contanier {
  height:400px;
  width: 1000px;
}
</style>